<template>
  <div>
    <div class="topHz1">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData1"
          size="medium"
          label-width="100px"
          label-position="right"
        >
          <el-col :span="8">
            <el-form-item label="患者姓名" prop="hzName">
              <el-input
                v-model="formData1.hzName"
                placeholder="请输入就诊者姓名"
                show-word-limit
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="就诊号" prop="hzNum">
              <el-input
                v-model="formData1.hzNum"
                placeholder="请输入就诊号"
                show-word-limit
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="就诊时间" prop="hzTime">
              <el-date-picker
                v-model="itemTime"
                align="right"
                type="date"
                placeholder="选择日期"
                :style="{ width: '100%' }"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
              <!-- <el-date-picker
                v-model="formData1.hzTime"
                :style="{ width: '100%' }"
                placeholder="请选择就诊时间"
                clearable
              ></el-date-picker> -->
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item size="large">
              <el-button
                type="success"
                @click="modal1 = true"
                style="margin-left: -40px"
                >挂号</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="large">
              <el-button
                style="margin-left: 23px;"
                type="primary"
                @click="submitForm1"
                >查询</el-button
              >
              <el-button @click="resetForm1">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="tablelook">
      <Table :columns="columns" :data="datalist" border></Table>
    </div>
    <pagination
      class="pagTitle"
      v-show="total > 0"
      :total="total"
      :page.sync="formData1.pageNum"
      :limit.sync="formData1.pageSize"
      @pagination="getList"
    />
    <Drawer title="挂号" v-model="modal1" width="720" :mask-closable="false">
      <el-row :gutter="15">
        <div class="titleName">患者信息:</div>
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="12">
            <el-form-item label="姓名" prop="hzName"> 
              <el-input
                v-model="formData.hzName"
                placeholder="请输入姓名"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="hzAge">
              <el-input
                v-model="formData.hzAge"
                placeholder="请输入年龄"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select
                v-model="formData.hzSix"
                placeholder="请选择下拉选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in hzSixOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="hzCard"> 
              <el-input
                v-model="formData.hzCard"
                placeholder="请输入身份证号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="住址">
              <el-input
                v-model="formData.hzAddress"
                placeholder="请输入住址"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="hzCall">
              <el-input
                v-model="formData.hzCall"
                placeholder="请输入联系方式"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <div style="height: 100px; width: 100%"></div>
          <div class="titleName">挂号信息：</div>
          <el-col :span="12">
            <el-form-item label="就诊时间" prop="hzTime">
              <el-date-picker
                v-model="formData.hzTime"
                type="date"
                placeholder="选择日期"
                @change="gethzTime"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一级科室">
              <el-select
                v-model="onedept"
                placeholder="请输入挂号科室"
                clearable
                :style="{ width: '100%' }"
                @change="getDept"
              >
                <el-option
                  v-for="(item, index) in deptList"
                  :key="index"
                  :label="item.deptName"
                  :value="item.deptId"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二级科室" prop="hzDpet">
              <el-select
                v-model="formData.hzDpet"
                placeholder="请输入挂号科室"
                clearable
                :style="{ width: '100%' }"
                @change="getDoc"
              >
                <el-option
                  v-for="(item, index) in deptList2"
                  :key="index"
                  :label="item.deptName"
                  :value="item.deptName"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂号类型" prop="hzLevel">
              <el-select
                @change="getDoc"
                v-model="formData.hzLevel"
                placeholder="请输入挂号级别"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in hzLevelOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="看诊医生" prop="hzDoc">
              <el-select
                v-model="formData.hzDoc"
                placeholder="请选择看诊医生"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in hzDocOptions"
                  :key="index"
                  :label="item.docName"
                  :value="item.docName"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="病历本" prop="hzBook">
              <el-radio-group
                v-model="formData.hzBook"
                size="medium"
                @change="getMoney"
              >
                <el-radio
                  v-for="(item, index) in hzBookOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" type="primary" @click="submitForm"
          >提交</Button
        >
        <Button @click="resetForm">重置</Button>
      </div>
    </Drawer>
    <Modal
      v-model="modal2"
      title="确定患者信息"
      @on-ok="submitModal"
      @on-cancel="cancelModal"
    >
      <div class="inputModal">
        <span>患者姓名:</span>
        <div>{{ formData.hzName }}</div>
      </div>
      <div class="inputModal">
        <span>科室:</span>
        <div>{{ formData.hzDpet }}</div>
      </div>
      <div class="inputModal">
        <span>看诊医生:</span>
        <div>{{ formData.hzDoc }}</div>
      </div>
      <div class="inputModal">
        <span>诊断号:</span>
        <div>{{ formData.hzNum }}</div>
      </div>
      <div class="inputModal">
        <span>收费金额:</span>
        <div>{{ money }}</div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { addUser, listUser, updateUser } from "@/api/qiantai/user";
import { listDept } from "@/api/system/dept";
import { listDocList } from "@/api/doclist/docList";
import expandRow from "./table-expand.vue";
import moment from 'moment';
export default {
  components: { expandRow },
  data() {
    return {
      itemTime: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      total: 0,
      modal2: false,
      modal1: false,
      columns: [
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row,
              },
            });
          },
        },
        {
          title: "病历号",
          key: "hzNum",
        },
        {
          title: "患者姓名",
          key: "hzName",
        },
        {
          title: "登记时间",
          key: "hzTime",
        },
        {
          title: "科室",
          key: "hzDpet",
        },
        {
          title: "挂号类型",
          key: "hzLevel",
          render: (h, params) => {
            return h("span", params.row.hzLevel == "1" ? "专家" : "普通");
          },
        },
        {
          title: "就诊状态",
          key: "hzState",
          render: (h, params) => {
            return h(
              "span",
              params.row.hzState == "1"
                ? "就诊完"
                : params.row.hzState == "2"
                ? "复诊中"
                : params.row.hzState == "3"
                ? "已退费"
                : "就诊中"
            );
          },
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            if (params.row.hzState == "1") {
              return h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.followUp(params.row);
                    },
                  },
                },
                "复诊"
              );
            } else {
              return h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                    disabled: true,
                  },
                },
                "复诊"
              );
            }
          },
        },
      ],
      formData1: {
        pageNum: 1,
        pageSize: 10,
        hzName: null,
        hzState: null,
        hzTime: null,
      },
      zdnum: null,
      onedept: null,
      deptList: null,
      deptList2: null,
      money: 0,
      formData: {
        hzName: null,
        hzAge: null,
        hzSix: null,
        hzCard: "",
        hzAddress: null,
        hzCall: null,
        hzTime: null,
        hzDpet: null,
        hzLevel: null,
        hzDoc: null,
        hzBook: null,
        hzNum: null,
      },
      rules: {
        hzName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        hzAge: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
        ],
        hzCard: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
            pattern:
              /^((\d{18})|([0-9x]{18})|([0-9X]{18}))$/,
          },
        ],
        hzAddress: [],
        hzCall: [
          {
            required: true,
            message: "请输入联系方式",
            trigger: "blur",
            pattern:
              /^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/,
          },
        ],
        hzTime: [
          {
            required: true,
            message: "请选择就诊时间",
            trigger: "change",
          },
        ],
        hzDpet: [
          {
            required: true,
            message: "请输入挂号科室",
            trigger: "change",
          },
        ],
        hzLevel: [
          {
            required: true,
            message: "请输入挂号级别",
            trigger: "change",
          },
        ],
        hzDoc: [
          {
            required: true,
            message: "请选择看诊医生",
            trigger: "change",
          },
        ],
        hzBook: [
          {
            required: true,
            message: "病历本不能为空",
            trigger: "change",
          },
        ],
      },
      hzSixOptions: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 0,
        },
      ],
      hzLevelOptions: [
        {
          label: "专家",
          value: 1,
        },
        {
          label: "普通",
          value: 0,
        },
      ],
      hzDocOptions: null,
      hzBookOptions: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      datalist: [],
      timeName: {}
    };
  },
  created() {
    listUser(this.formData1).then((res) => {
      this.datalist = res.rows;
      this.total = res.total;
    });
    listDept({ parentId: 100 }).then((res) => {
      this.deptList = res.data;
    });
  },
  methods: {
    gethzTime() {
      const day = moment(this.formData.hzTime).weekday();
      this.timeName={};
      this.timeName[`day${day}am`]=1;
      this.formData.hzDoc = null;
      if(this.formData.hzDpet+""&&this.formData.hzLevel+""){
        this.getDoc();
      }
    },
    getList() {
      listUser(this.formData1).then((res) => {
        this.datalist = res.rows;
        this.total = res.total;
      });
    },
    // 复诊
    followUp(e) {
      this.$confirm("是否确定复诊?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        e.hzState = 2;
        updateUser(e).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "复诊成功!",
            });
          }
        });
      });
    },
    formatTime(t, format = "yyyy-MM-dd") {
      const date = {
        "M+": t.getMonth() + 1,
        "d+": t.getDate(),
        "h+": t.getHours(),
        "m+": t.getMinutes(),
        "s+": t.getSeconds(),
        "q+": Math.floor((t.getMonth() + 3) / 3),
        "S+": t.getMilliseconds(),
      };

      if (/(y+)/i.test(format)) {
        format = format.replace(
          RegExp.$1,
          (t.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }

      for (const k in date) {
        if (new RegExp("(" + k + ")").test(format)) {
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? date[k]
              : ("00" + date[k]).substr(("" + date[k]).length)
          );
        }
      }
      return format;
    },
    // 挂号重置筛选
    resetForm1() {
      this.formData1 = { ...{} };
      listUser().then((res) => {
        this.datalist = res.rows;
        this.total = res.total;
      });
    },
    submitForm1() {
      if (this.itemTime) {
        this.formData1.hzTime = this.formatTime(this.itemTime);
      }
      listUser(this.formData1).then((res) => {
        this.datalist = res.rows;
        console.log(this.formData1.hzTime);
        console.log(this.datalist);
      });
    },
    // 随机生成诊断号
    randomNum(len = 12) {
      // const $chars = "0123456789";
      // const maxPos = $chars.length;
      // let pwd = "";
      // for (let i = 0; i < len; i++) {
      //   pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      // }
      // return pwd;
      return new Date().getTime();
    },
    // 获取医生列表
    getDoc() {
      this.formData.hzDoc = null;
      this.$nextTick(() => {
        listDocList({
          docDept: this.formData.hzDpet,
          docLevel: this.formData.hzLevel,
          ...this.timeName
        }).then((res) => {
          console.log(this.formData.hzDpet, res);
          this.hzDocOptions = res.rows;
        });
      });
    },
    // 获取第二科室
    getDept() {
      this.formData.hzDpet = null;
      this.formData.hzLevel = null;
      this.formData.hzDoc = null;
      this.$nextTick(() => {
        listDept({ parentId: this.onedept }).then((res) => {
          this.deptList2 = res.data;
        });
      });
    },
    // 费用
    getMoney() {
      if (this.formData.hzLevel == "1") {
        // console.log("1",this.money,this.formData.hzLevel,this.formData.hzBook);
        this.money = 30 + Number(this.formData.hzBook) * 5;
      } else {
        this.money = 20 + Number(this.formData.hzBook) * 5;
      }
    },
    cancelModal() {
      this.modal2 = false;
    },
    submitModal() {
      this.modal2 = false;
      this.modal1 = false;
      addUser(this.formData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "挂号成功！",
            type: "success",
          });
        }
      });
      this.getList();
      this.$nextTick(() => {
        this.onedept = null;
        this.resetForm();
      });
    },
    // 提交
    submitForm() {
      this.$refs["formData"].validate((valid)=>{
        if (valid) {
          this.formData.hzNum = this.randomNum();
          this.formData.hzState = 0;
          this.modal2 = true;
        }else {
          this.$message({
            message: '请补全患者信息！',
            type: 'warning'
          });
        }
      })
    },
    // 重置
    resetForm() {
      this.onedept = null;
      this.formData = {
        hzName: null,
        hzAge: null,
        hzSix: null,
        hzCard: "",
        hzAddress: null,
        hzCall: null,
        hzTime: null,
        hzDpet: null,
        hzLevel: null,
        hzDoc: null,
        hzBook: null,
        hzNum: null,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.topHz1 {
  margin-top: 50px;
  margin-right: 50px;
  margin-left: 20px;
}
.topHz {
  padding: 20px;
  margin: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.split {
  height: 1px;
  background-color: darkgrey;
  margin: 50px 30px 50px;
}
.zd-p {
  & > span {
    font-size: 16px;
    color: #606266;
  }
  margin-left: 650px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fy-num {
  width: 100px;
  height: 30px;
  padding: 7px 10px;
  margin-left: 10px;
  margin-right: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.zd-num {
  width: 200px;
  height: 30px;
  padding: 7px 10px;
  margin-left: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.tablelook {
  margin-left: 80px;
  margin-right: 80px;
}
.pagTitle {
  margin-bottom: 50px;
}
.inputModal {
  height: 40px;
  line-height: 40px;
  :first-child {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
  }
  :nth-child(2) {
    display: inline-block;
    width: 150px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    line-height: 30px;
    padding-left: 5px;
    margin-left: 5px;
  }
}
.demo-drawer-footer {
  margin-top: 60px;
}
.titleName {
  font-size: 30px;
  font-family: "Helvetica Neue";
  margin-bottom: 20px;
  margin-left: 10px;
}
::v-deep {
  .pagination-container .el-pagination {
    width: 100%;
    text-align: center;
  }
}
</style>
